<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/highlight.pack.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/agate.css">
    <style>
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 100px; /* Set the top position of pinned element */
        }
        p{ text-indent:2em;}
    </style>
    <title>设计模式</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20" style="padding-top: 70px;">

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            </button>
            <a class="navbar-brand" href="welcome.jsp"><strong>设计模式</strong></a>
        </div>
        <div class="navbar-right">
            <p class="navbar-text">【管理员】 <a href="log_suc.jsp" class="navbar-link">徐传鹏</a></p>
            <button type="button" class="btn btn-default navbar-btn " onclick="check()">注销</button>
        </div>
    </div>
</nav>


<div class="container">
    <div class="jumbotron">
        <h1>Hello, Design pattern!</h1>
        <br>
        <a class="btn btn-primary btn-lg" href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=2" role="button">Learn more</a>
    </div>
    <div class="row">
        <div class="col-xs-2" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked affix" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">欢迎</a></li>
                <li><a href="#section-2">Gang of Four</a></li>
                <li><a href="#section-3">关系图</a></li>
                <li><a href="#section-4">总结</a></li>
            </ul>
        </div>

        <div class="col-xs-7">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" id="section-1">欢迎！</h3>
                </div>
                <div class="panel-body">
                    <p>设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。 设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。项目中合理地运用设计模式可以完美地解决很多问题，每种模式在现实中都有相应的原理来与之对应，每种模式都描述了一个在我们周围不断重复发生的问题，以及该问题的核心解决方案，这也是设计模式能被广泛应用的原因。</p>
                </div>
            </div>

            <div id="section-2" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">什么是 GOF（四人帮，全拼 Gang of Four）？</h3>
                </div>
                <div class="panel-body">
                    <p>在 1994 年，由 Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides 四人合著出版了一本名为 Design Patterns - Elements of Reusable Object-Oriented Software（中文译名：设计模式 - 可复用的面向对象软件元素） 的书，该书首次提到了软件开发中设计模式 的概念。四位作者合称 GOF（四人帮，全拼 Gang of Four）。</p>
                    <p> 他们所提出的设计模式主要是基于以下的面向对象设计原则:</p>
                    <li>对接口编程而不是对实现编程。</li>
                    <li> 优先使用对象组合而不是继承。</li>
                    <h3>设计模式的使用</h3>
                    <p>设计模式在软件开发中的两个主要用途。</p>
                    <h4>开发人员的共同平台</h4>
                    <p>设计模式提供了一个标准的术语系统，且具体到特定的情景。例如，单例设计模式意味着使用单个对象，这样所有熟悉单例设计模式的开发人员都能使用单个对象，并且可以通过这种方式告诉对方，程序使用的是单例模式。</p>
                    <h4>最佳的实践</h4>
                    <p>设计模式已经经历了很长一段时间的发展，它们提供了软件开发过程中面临的一般问题的最佳解决方案。学习这些模式有助于经验不足的开发人员通过一种简单快捷的方式来学习软件设计。</p>
                    <h4>设计模式的类型</h4>
                    <p>根据设计模式的参考书 <b>Design Patterns - Elements of Reusable Object-Oriented Software（中文译名：设计模式 - 可复用的面向对象软件元素）</b> 中所提到的，总共有 <b>23</b> 种设计模式。这些模式可以分为三大类：<b>创建型模式（Creational Patterns）、结构型模式（Structural Patterns）、行为型模式（Behavioral Patterns）</b>。</p>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 id="section-3" class="panel-title">各设计模式之间的关系：</h3>
                </div>
                <div class="panel-body">
                    <img src="images/home.jpg" style="width:100%">
                </div>
            </div>
            <div id="section-4" class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">最后</h3>
                </div>
                <div class="panel-body">
                    <p>由于课本的编写风格不太利于知识点的总结，所以，此系统中的许多定义和资料参考了其他的书籍或网络资源，并使用的较为熟悉的java代码示例。但仍然以课上内容为主，并在“代码”模块中单独组织了实验内容。</p>
                </div>
            </div>
        </div>

        <div id="list" class="col-xs-3">
            <ul class="list-group"  style="width:90%;float:right">
                <h3>模式列表</h3>
                <li class="list-group-item"><strong>----------创建型模式------------</strong></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=2">工厂模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=3">抽象工厂模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=4">单例模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=5">建造者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=6">原型模式</a></li>
                <li class="list-group-item"><strong>----------结构型模式------------</strong></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=7">适配器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=8">桥接模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=9">过滤器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=10">组合模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=11">装饰模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=12">外观模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=13">享元模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=14">代理模式</a></li>
                <li class="list-group-item"><strong>----------行为型模式------------</strong></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=15">迭代器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=16">策略模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=17">观察者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=18">状态模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=19">备忘录模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=20">命令模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=21">职责链模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=22">中介者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=23">解释器模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=24">访问者模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=pattern&pid=25">模板方法模式</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=six">------------六大原则------------</a></li>
                <li class="list-group-item"><a href="${pageContext.request.contextPath}/JServlet?actionName=end">-------------总结---------------</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    function check() {
        if (confirm("注销?")){
            $.post("/patterns/JServlet",{
                    actionName:"clear"},
                function (data) {
                    if (data.search("clearSuc")!==-1){
                        window.location.href="index.jsp";
                    }else {
                        alert("对不起，注销失败！请重试。");
                    }
                }
            );
        }
    }
</script>
</body>
</html>